<template>
    <div>
        <div class="vs-table-box" style="padding: 20px 100px">
            <el-descriptions border :column="3" title="顾客信息" style="margin-top: 20px" v-if="form.user">
                <el-descriptions-item label="姓名">{{ form.user.realname }}</el-descriptions-item>
                <el-descriptions-item label="性别">{{ form.user.gender == 1 ? '男' : '女' }}</el-descriptions-item>
                <el-descriptions-item label="手机号">{{ form.user.phone }}</el-descriptions-item>
                <!-- 非会员订单不显示会员卡号 -->
                <el-descriptions-item label="会员卡号" v-if="form.user.vip_no">{{ form.user.vip_no }}</el-descriptions-item>
                <el-descriptions-item label="头围" v-if="form.user.vip_no">{{ form.user.header }}</el-descriptions-item>
                <el-descriptions-item label="前后" v-if="form.user.vip_no">{{ form.user.around }}</el-descriptions-item>
                <el-descriptions-item label="左右" v-if="form.user.vip_no">{{ form.user.about }}</el-descriptions-item>
            </el-descriptions>
            <div class="line"></div>

            <div class="tit">消费列表</div>
            <el-table :data="form.consumption" ref="multipleTable" border @select="selectionRow" @select-all="selectionRowAll" style="width: 100%">
                <!--  -->
                <el-table-column type="selection" align="center" width="55"> </el-table-column>
                <el-table-column type="index" label="序号" align="center" width="55"> </el-table-column>
                <el-table-column prop="name" label="名称" align="center">
                    <template slot-scope="scope">
                        <div>
                            {{ scope.row.project_name || scope.row.goods_name || '' }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="单价" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.price }}
                    </template>
                </el-table-column>
                <el-table-column label="数量" align="center" width="120px">
                    <template slot-scope="scope">
                        <div v-if="!scope.row.isSelect">{{ scope.row.number }}</div>
                        <el-input-number v-model="scope.row.number" :min="1" :max="scope.row.number2" @change="handleChange($event, scope.row)" size="mini" style="width: 100%" v-else></el-input-number>
                    </template>
                </el-table-column>
                <el-table-column prop="discount_rate" label="折扣率" align="center"> </el-table-column>
                <el-table-column prop="discount_amount" label="折扣价" align="center">
                    <template slot-scope="scope">
                        <!-- <span v-if="scope.row.discountPrice!=scope.row.discount_amount">
                            原({{scope.row.discountPrice}})修改成{{scope.row.discount_amount}}
                        </span>
                        <span v-else> -->
                        {{ scope.row.discount_amount }}
                        <!-- </span> -->
                    </template>
                </el-table-column>
                <el-table-column label="员工" align="center" min-width="100" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <div v-for="item in form.commission" :key="item.id">
                            <span v-if="item.project_id == scope.row.id || item.goods_id == scope.row.id">{{ rtUser(item.staff_id) }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="金额" align="center">
                    <template slot-scope="scope">
                        <div v-if="!scope.row.isSelect">{{ scope.row.money }}</div>
                        <div v-else>
                            <el-input @blur="theTotalPrice()" v-model="scope.row.money" placeholder=""></el-input>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <div class="money">
                <div>
                    商品总价：<span>￥{{ form.total }} </span>
                </div>
                <div>
                    商品应付总价：<span>￥{{ form.orders_payable }}</span>
                </div>
                <div>
                    实付金额：<span style="color: red">￥{{ form.paid_amount }}</span>
                </div>
            </div>
            <div class="order_info">
                <div>
                    <span>退款备注：</span>
                    <el-input v-model="tkForm.remarks" placeholder=""></el-input>
                </div>
                <div>
                    <span>退款金额：</span>
                    <el-input type="number" readonly v-model="tkForm.price" placeholder=""></el-input>
                </div>
            </div>
            <div class="vs-bottom-btns">
                <el-button @click="utils.backPage()">返回</el-button>
                <el-button @click="tk" :loading="isBtn" type="primary">确定</el-button>
            </div>
        </div>
        <el-dialog :visible.sync="dialogVisible" width="500px" :before-close="dialogBeforeClose">
            <div slot="title" class="dialog_tit">退货列表</div>
            <div style="padding: 0 40px">
                <el-table :data="tkForm.data" border style="width: 100%">
                    <el-table-column type="index" label="序号" align="center" width="55"> </el-table-column>
                    <el-table-column label="商品系列" align="center">
                        <template slot-scope="scope">
                            <div>
                                {{ scope.row.project_name || scope.row.goods_name || '' }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="单价" align="center">
                        <template slot-scope="scope">
                            {{ scope.row.price }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="number" label="数量" align="center"> </el-table-column>
                    <el-table-column label="金额" align="center">
                        <template slot-scope="scope">
                            {{ scope.row.money }}
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div slot="footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" :loading="isBtn" @click="subitm">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                input4: '',
                tableData: [{}],
                dialogVisible: false,
                isBtn: false,
                goodsType: '', //1特殊商品 2.普通商品
                orderType: '', //1.已完成  2.待付尾款  3.已退款  4.退款
                loading: false,
                form: {},
                userList: [],
                tkForm: {
                    orders_id: '',
                    data: '',
                    remarks: '',
                    price: '',
                },
                selectList: [],
            };
        },
        created() {
            let { id, type } = this.$route.query;
            if (id) {
                this.getStaff();
                this.getOrderInfo(id);
            }
        },
        methods: {
            selectionRowAll(selection) {
                if (selection.length == 0) {
                    this.form.consumption.forEach((v) => {
                        this.selectionRow([], v);
                    });
                } else
                    selection.forEach((v) => {
                        v.isSelect = true;
                        this.selectList.push(v.id);
                    });
                this.theTotalPrice();
            },
            selectionRow(selection, row) {
                let selected = selection.indexOf(row);
                console.log(selection, selected, '选择');
                if (selected !== -1) {
                    //为true时选中
                    // this.deleteRowIdArray.push(row);
                    row.isSelect = true;
                } else {
                    row.isSelect = false;
                    row.money = row.orders_payable - row.return_money;
                    row.number = row.number2;
                    // this.selectList.splice(selected,1)
                    // this.selectList = selection;
                }
                this.selectList = selection.map((v) => v.id);
                this.theTotalPrice();
            },
            async getOrderInfo(id) {
                let { code, data } = await this.$Http.getOrders({ id });
                if (code === 10000) {
                    data.consumption = data.goods.concat(data.project).filter((v) => v.return_status != 2);
                    data.consumption.forEach((e) => {
                        //折扣单价
                        e.discountUnitPrice = (e.orders_payable / e.number).toFixed(2);
                        e.isSelect = false;
                        // 总金额
                        e.money = e.orders_payable - e.return_money;
                        e.number = e.number - e.return_number;
                        e.number2 = e.number;
                        //折扣价
                        // e.discountPrice = (e.price - e.price * (Number(e.discount_rate) / 10)).toFixed(2);
                    });
                    this.form = data;
                    this.goodsType = data.type;
                    this.orderType = data.status;
                    // console.log(this.form);
                }
            },
            tk() {
                //确认
                // this.tkForm = this.$refs.form.Selection()
                let list = this.$refs.multipleTable.selection;
                if (list.length === 0) return this.$message.error('请选择要退款的商品/项目');
                this.tkForm.data = list;
                this.dialogVisible = true;
            },
            handleChange(e, item) {
                item.money = (Number(item.discountUnitPrice) * Number(item.number)).toFixed(2);
                this.theTotalPrice();
            },
            //计算总价
            theTotalPrice() {
                let list = this.form.consumption.filter((v) => this.selectList.some((v2) => v2 == v.id));
                let price = 0;
                console.log('价格计算', this.selectList);
                list.forEach((v) => {
                    price += Number(v.money);
                });
                this.tkForm.price = price;
            },
            rtUser(id) {
                if (!id || !this.userList?.length) return;
                let item = this.userList.find((it) => it.id == id);
                if (!item) return;
                return `${item?.name}(${item.position?.name ?? '无'})`;
            },
            async getStaff() {
                let { code, data } = await this.$Http.getStaff({
                    is_all: 1,
                    status: 1,
                });
                if (code) {
                    this.userList = data;
                }
            },
            async subitm() {
                // let arr = [];
                // this.form.consumption.forEach((e) => {
                // 	let a = {};
                // 	if (e.goods_id) {
                // 		a.type = 2;
                // 	} else if (e.project_id) {
                // 		a.type = 1;
                // 	}
                // 	a.id = e.id;
                // 	a.number = e.number;
                // 	a.price = e.money;
                // 	arr.push(a);
                // });
                // this.tkForm.data = JSON.stringify(arr);
                // this.tkForm.orders_id = this.form.id;
                // console.log(this.tkForm);
                let obj = Object.assign({}, this.tkForm);
                obj.orders_id = this.form.id;
                obj.data = obj.data.map((v) => {
                    if (v.goods_id) {
                        v.type = 2;
                    } else if (v.project_id) {
                        v.type = 1;
                    }
                    return {
                        id: v.id,
                        type: v.type,
                        number: v.number,
                        price: v.money,
                    };
                });
                obj.data = JSON.stringify(obj.data);
                this.isBtn = true;
                let { code, data } = await this.$Http.returnOrders(obj);
                this.isBtn = false;
                if (code === 10000) {
                    this.$message.success('退款成功');
                    this.utils.backPage();
                }
            },
            dialogBeforeClose() {
                this.dialogVisible = false;
            },
        },
    };
</script>

<style>
    .disabled .el-upload--picture-card {
        display: none !important;
    }
</style>
<style lang="scss" scoped>
    :v-deep {
    }

    .orderStatus {
        padding: 40px 40px;
        display: flex;
        align-items: center;

        .left_order_status {
            display: flex;
            align-items: center;

            > span {
                margin-left: 30px;
                font-size: 22px;
                color: red;
            }
        }

        .right_money {
            margin-left: auto;
            display: flex;
            align-items: center;

            > div {
                display: flex;
            }

            > div:first-child {
                margin-right: 40px;
                color: red;
            }
        }
    }

    .tit {
        margin: 20px 0;
        font-size: 16px;
        font-weight: 700;
    }

    .money {
        display: flex;
        flex-direction: column;

        > div {
            padding: 0 40px;
            margin-top: 10px;
            text-align: right;
        }
    }

    .order_info {
        margin-top: 40px;
        display: flex;
        justify-content: space-between;

        > div {
            display: flex;
            align-items: center;

            > span {
                width: 150px;
            }
        }
    }

    .line {
        margin: 40px 0;
        height: 1px;
        background-color: rgba($color: #000000, $alpha: 0.2);
    }

    .dialog_tit {
        padding-bottom: 10px;
        border-bottom: 1px solid rgba($color: #000000, $alpha: 0.2);
    }
</style>
